

/*--------tooltip----------------*/
.twipsy {
    display: none;
    position: absolute;
    visibility: visible;
    max-width: 300px;
    min-width: 100px;
    padding: 5px;
    font-size: 11px;
    z-index: 1000;
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
}
.twipsy.left .twipsy-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #000000;
}
.twipsy.right .twipsy-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #000000;
}
.twipsy-inner {
    padding: 3px 8px;
    background-color: #000000;
    color: white;
    text-align: center;
    max-width: 300px;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.twipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
}
/*-------slider --------------*/
input[type=range] {
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type=range]::-moz-slider-thumb {
    -webkit-appearance: none;
}
input[type=range]::-ms-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 10px; /*将轨道设为圆角的*/
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
input[type=range]::-moz-range-track  {
    height: 10px;
    border-radius: 10px; /*将轨道设为圆角的*/
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    margin-top: -2px; /*使滑块超出轨道部分的偏移量相等*/
    background: #ffffff;
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    margin-top: -2px; /*使滑块超出轨道部分的偏移量相等*/
    background: #ffffff;
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}

input[type=range]::-moz-range-progress {
    background: linear-gradient(to right, #059CFA, white 100%, white);
    height: 13px;
    border-radius: 10px;
}
input[type=range] {
    -webkit-appearance: none;
    width: 170px;
    border-radius: 10px;
}

input[type=range]::-ms-track {
    height: 10px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
    border-color: transparent; /*去除原有边框*/
    color: transparent; /*去除轨道内的竖线*/
}

input[type=range]::-ms-thumb {
    border: solid 0.125em rgba(205, 224, 230, 1.0);
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #ffffff;
    margin-top: -5px;
    box-shadow: 0 .125em .125em #3b4547;
}

input[type=range]::-ms-fill-lower {
    /*进度条已填充的部分*/
    height: 10px;
    border-radius: 10px;
    background: linear-gradient(to right, #059CFA, white 100%, white);
}

input[type=range]::-ms-fill-upper {
    /*进度条未填充的部分*/
    height: 10px;
    border-radius: 10px;
    background: #ffffff;
}

input[type=range]:focus::-ms-fill-lower {
    background: linear-gradient(to right, #059CFA, white 100%, white);
}

input[type=range]:focus::-ms-fill-upper {
    background: #ffffff;
}
/*-------slider end--------------*/
/*-------bubble start------------*/
.bubble {
    position: absolute;
    transform: scale(0.8);
    /* margin: 0;
    padding: 8px 10px;
    border: 1px solid #cdcdcd;
    border-radius: 5px;

    font-size: 14px;
    color: #222;
    text-align: center;

    max-width: 500px;
    max-height: 800px;
    background: #fff;
    box-shadow: 2px 2px 3px 0 rgb(34, 34, 34, 0.4);
    z-index: 999; */
}
.bubble h1 {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #cdcdcd;
}
.bubble .bubble-close {
    float: right;
    width: 12px;
    height: 12px;
    margin-right: -5px;
    /* background: url('../images/close-icon-2.png') no-repeat; */
    background-size: 100% 100%;
}
.bubble .param-item-wrap {
    max-height: 500px;
    overflow: auto;
}
.param-item-wrap::-webkit-scrollbar-track-piece {
    background-color: #3b3b3b;
}
.param-item-wrap::-webkit-scrollbar {
    width: 4px;
    height: 9px;
}
.param-item-wrap::-webkit-scrollbar-thumb {
    background-color:#9c9c9c;
    background-clip: padding-box;
    min-height: 28px;
}
.param-item-wrap::-webkit-scrollbar-thumb:hover {
    background-color: #9c9c9c;
}
.bubble .param-item {
    height: 30px;
    line-height: 30px;
}
.bubble .left-label {
    display: inline-block;
    width: 70px;
    text-align: right;
    margin-right: 4px;
    color: #222;
    user-select: none;
}
.bubble input[type=text],
.bubble select{
    color: #222;
    height: 24px;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    padding-left: 8px;
}
.bubble input[type=text]:hover,
.bubble select:hover,
.bubble textarea:hover {
    border-color: #059CFA;
}
textarea[readonly],
input[readonly] {
    background: #e9e9e9;
    cursor:not-allowed
}
.bubble textarea {
    color: #222;
    padding: 4px 8px;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    resize: none;
}
.bubble .param-item button {
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    color: #222;
    cursor: pointer;
    background: transparent;
}
.bubble .param-item button:hover{
    background: #059CFA;
    color: #fff;
}
.bubble .last-item.tiny::after,
.bubble .last-item::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50px;
    border-width: 0 20px 50px 0px;
    border-style: solid;
    border-color: transparent #fff;
    display: block;
    width: 0;
}
.bubble .last-item.tiny::after {
    bottom: -36px;
    left: 39px;
    border-width: 0 20px 36px 0px;
}
.bubble .theme.last-item::after {
    border-color:transparent rgba(255, 255, 255, 1);
}
